<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参会报名页面预览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: #f5f7fa;
        }
        
        /* 步骤条 */
        .steps_container {
            background: white;
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }
        
        .steps_wrapper {
            max-width: 600px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        
        .step_item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
        }
        
        .step_number {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #5DADE2;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        
        .step_number.inactive {
            background: #e0e0e0;
            color: #999;
        }
        
        .step_label {
            font-size: 0.9rem;
            color: #5DADE2;
            font-weight: 600;
        }
        
        .step_label.inactive {
            color: #666;
        }
        
        .step_line {
            flex: 1;
            height: 2px;
            background: #e0e0e0;
            margin: 0 1rem;
        }
        
        /* 内容 */
        .content {
            max-width: 1400px;
            margin: 2rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 350px;
            gap: 2rem;
        }
        
        .card {
            background: white;
            border-radius: 0.75rem;
            padding: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            margin-bottom: 1.5rem;
        }
        
        .section_title {
            font-size: 1.3rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 0.75rem;
        }
        
        .title_icon {
            margin-right: 0.5rem;
        }
        
        /* 注册类型 */
        .types {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }
        
        .type_card {
            border: 2px solid #5DADE2;
            background: #EBF5FB;
            border-radius: 0.5rem;
            padding: 1.25rem;
            cursor: pointer;
        }
        
        .type_card.inactive {
            border-color: #e0e0e0;
            background: white;
        }
        
        .type_header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .type_name {
            font-weight: 600;
            font-size: 0.95rem;
        }
        
        .type_price {
            font-size: 1.2rem;
            font-weight: 700;
            color: #5DADE2;
        }
        
        .type_deadline {
            font-size: 0.85rem;
            color: #999;
        }
        
        /* 表单 */
        .form_grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
        }
        
        .form_field {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .form_field label {
            font-size: 0.9rem;
            font-weight: 500;
            color: #555;
        }
        
        .form_field input {
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 0.375rem;
            font-size: 0.95rem;
        }
        
        .required {
            color: #e74c3c;
        }
        
        .attendee_box {
            background: #fafafa;
            border: 1px solid #e0e0e0;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .attendee_header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .number_badge {
            display: inline-block;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #5DADE2;
            color: white;
            text-align: center;
            line-height: 28px;
            margin-right: 0.5rem;
        }
        
        /* 按钮 */
        .btn_add {
            width: 100%;
            padding: 1rem;
            border: 2px dashed #5DADE2;
            background: white;
            color: #5DADE2;
            border-radius: 0.5rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
        }
        
        .actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }
        
        .btn {
            padding: 1rem 3rem;
            border: none;
            border-radius: 0.5rem;
            font-size: 1.05rem;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn_secondary {
            background: #ecf0f1;
            color: #555;
        }
        
        .btn_primary {
            background: #5DADE2;
            color: white;
        }
        
        /* 右侧摘要 */
        .summary_card {
            position: sticky;
            top: 2rem;
        }
        
        .summary_title {
            text-align: center;
            font-size: 1.3rem;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .summary_item {
            display: flex;
            justify-content: space-between;
            padding: 0.75rem 0;
        }
        
        .summary_label {
            color: #666;
        }
        
        .summary_value {
            font-weight: 500;
        }
        
        .summary_divider {
            height: 1px;
            background: #e0e0e0;
            margin: 1rem 0;
        }
        
        .total {
            padding: 1rem 0;
            margin-top: 0.5rem;
        }
        
        .total .summary_label {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .price {
            font-size: 1.5rem;
            font-weight: 700;
            color: #e74c3c;
        }
        
        .highlight {
            color: #5DADE2;
            font-weight: 700;
            font-size: 1.2rem;
        }
        
        .tips {
            background: #FFF9E6;
            border: 1px solid #FFE082;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .tips_title {
            font-weight: 600;
            color: #F39C12;
            margin-bottom: 1rem;
        }
        
        .tips ul {
            list-style: none;
            padding: 0;
        }
        
        .tips li {
            font-size: 0.85rem;
            color: #856404;
            padding: 0.25rem 0 0.25rem 1.5rem;
            position: relative;
        }
        
        .tips li::before {
            content: '•';
            position: absolute;
            left: 0.5rem;
            color: #F39C12;
            font-weight: bold;
        }
        
        .note {
            text-align: center;
            padding: 2rem;
            background: #e3f2fd;
            margin: 2rem;
            border-radius: 0.5rem;
            color: #1976d2;
        }
    </style>
</head>
<body>
    <!-- 步骤条 -->
    <div class="steps_container">
        <div class="steps_wrapper">
            <div class="step_item">
                <div class="step_number">1</div>
                <div class="step_label">参会信息</div>
            </div>
            <div class="step_line"></div>
            <div class="step_item">
                <div class="step_number inactive">2</div>
                <div class="step_label inactive">订单支付</div>
            </div>
            <div class="step_line"></div>
            <div class="step_item">
                <div class="step_number inactive">3</div>
                <div class="step_label inactive">完成</div>
            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
        <!-- 左侧表单 -->
        <div class="form_section">
            <!-- 会议信息 -->
            <div class="card">
                <h3 class="section_title">
                    <span class="title_icon">📋</span>参会信息
                </h3>
                <div style="display: flex; flex-direction: column; gap: 0.75rem;">
                    <div style="display: flex;">
                        <span style="color: #666; min-width: 90px;">会议名称：</span>
                        <span>第六届人工智能与计算机工程国际学术会议（ICAICE 2025）</span>
                    </div>
                    <div style="display: flex;">
                        <span style="color: #666; min-width: 90px;">会议时间：</span>
                        <span>2025-11-07</span>
                    </div>
                    <div style="display: flex;">
                        <span style="color: #666; min-width: 90px;">会议地点：</span>
                        <span>重庆市</span>
                    </div>
                </div>
            </div>

            <!-- 注册类型 -->
            <div class="card">
                <h3 class="section_title">
                    <span class="title_icon" style="color: #e74c3c;">*</span>注册类型
                </h3>
                <div class="types">
                    <div class="type_card">
                        <div class="type_header">
                            <div class="type_name">Poster Presentation/墙报展示</div>
                            <div class="type_price">¥ 1,800</div>
                        </div>
                        <div class="type_deadline">注册截止: 2025.10.31</div>
                    </div>
                    <div class="type_card inactive">
                        <div class="type_header">
                            <div class="type_name">Oral Presentation/口头报告</div>
                            <div class="type_price">¥ 1,800</div>
                        </div>
                        <div class="type_deadline">注册截止: 2025.10.31</div>
                    </div>
                    <div class="type_card inactive">
                        <div class="type_header">
                            <div class="type_name">Listener/听众</div>
                            <div class="type_price">¥ 1,500</div>
                        </div>
                        <div class="type_deadline">注册截止: 2025.10.31</div>
                    </div>
                </div>
            </div>

            <!-- 参会人信息 -->
            <div class="card">
                <h3 class="section_title">
                    <span class="title_icon">👥</span>参会人信息
                </h3>
                
                <div class="attendee_box">
                    <div class="attendee_header">
                        <h4 style="margin: 0;">
                            <span class="number_badge">1</span>
                            <span>参会人</span>
                        </h4>
                    </div>
                    
                    <div class="form_grid">
                        <div class="form_field">
                            <label><span class="required">*</span>姓名:</label>
                            <input type="text" placeholder="请输入姓名" />
                        </div>
                        <div class="form_field">
                            <label><span class="required">*</span>手机:</label>
                            <input type="text" placeholder="请输入手机" />
                        </div>
                        <div class="form_field">
                            <label><span class="required">*</span>工作单位:</label>
                            <input type="text" placeholder="请输入工作单位" />
                        </div>
                        <div class="form_field">
                            <label><span class="required">*</span>Speech Title/报告标题:</label>
                            <input type="text" placeholder="请输入报告标题" />
                        </div>
                        <div class="form_field">
                            <label><span class="required">*</span>Affiliation/单位:</label>
                            <input type="text" placeholder="请输入单位" />
                        </div>
                        <div class="form_field">
                            <label><span class="required">*</span>Title/职称:</label>
                            <input type="text" placeholder="请输入职称" />
                        </div>
                    </div>
                </div>
                
                <button class="btn_add">+ 新增参会人</button>
            </div>

            <!-- 订单备注 -->
            <div class="card">
                <h3 class="section_title">
                    <span class="title_icon">📝</span>订单备注
                </h3>
                <textarea style="width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 0.375rem; font-family: inherit; resize: vertical;" rows="4" placeholder="请留言您的订单备注"></textarea>
            </div>

            <!-- 按钮 -->
            <div class="actions">
                <button class="btn btn_secondary">保存草稿</button>
                <button class="btn btn_primary">提交</button>
            </div>
        </div>

        <!-- 右侧摘要 -->
        <div class="summary_section">
            <div class="card summary_card">
                <h3 class="summary_title">订单支付</h3>
                <div class="summary_item">
                    <div class="summary_label">会议名称</div>
                    <div class="summary_value">ICAICE 2025</div>
                </div>
                <div class="summary_item">
                    <div class="summary_label">会议时间</div>
                    <div class="summary_value">2025-11-07</div>
                </div>
                <div class="summary_item">
                    <div class="summary_label">参会人数</div>
                    <div class="summary_value highlight">1</div>
                </div>
                <div class="summary_divider"></div>
                <div class="summary_item total">
                    <div class="summary_label">
                        <span style="margin-right: 0.5rem;">💰</span>
                        注册费用总计
                    </div>
                    <div class="summary_value price">¥ 0</div>
                </div>
            </div>
            
            <div class="tips">
                <h4 class="tips_title">💡 温馨提示</h4>
                <ul>
                    <li>请确保填写信息准确无误</li>
                    <li>提交后将无法修改注册类型</li>
                    <li>请在截止日期前完成支付</li>
                    <li>如有疑问请联系会议组委会</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="note">
        <p style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">
            🎉 这是静态预览页面
        </p>
        <p>实际页面会自动加载会议信息、动态计算金额、支持多参会人添加等功能</p>
        <p style="margin-top: 0.5rem;">访问实际页面：<code>http://127.0.0.1:8081/user_participation/register?meeting_information_id=1</code></p>
    </div>
</body>
</html>




